<template>
  <div id="app">
    <div class="title-box">
      <div class="school-tile">
        <img class="bg-pen" style="left: 0px;bottom: 0px;" src="./assets/school-bg-2.png" alt="">
        <img class="bg-pen" style="left: 55%;top: -1px;" src="./assets/school-bg-3.png" alt="">
        <img class="bg-pen" style="left: 73%;top: -1px;" src="./assets/school-bg-4.png" alt="">
        <img class="bg-pen" style="left: 75%;top: -1px;" src="./assets/school-bg-4.png" alt="">
        <img class="bg-pen" style="left: 77%;top: -1px;" src="./assets/school-bg-4.png" alt="">
        <img class="bg-pen" style="left: 79%;top: -1px;" src="./assets/school-bg-4.png" alt="">
        学校名称
        <img class="bg-pen" style="right: 21%;bottom: 1px;" src="./assets/school-bg-6.png" alt="">
        <img class="bg-pen" style="right: 60%;bottom: 1px;" src="./assets/school-bg-7.png" alt="">
        <img class="bg-pen" style="right: 62%;bottom: 1px;" src="./assets/school-bg-7.png" alt="">
        <img class="bg-pen" style="right: 64%;bottom: 1px;" src="./assets/school-bg-7.png" alt="">
        <img class="bg-pen" style="right: 66%;bottom: 1px;" src="./assets/school-bg-5.png" alt="">
      </div>
      <div class="product-tile">
        <img  class="bg-pen" 
        :style="{
          left:'16px',
          bottom:'1px'
        }"
        src="./assets/product-bg-6.png" alt="">
        <img 
        :style="{
          right:'16px',
          bottom:'0px'
        }"
         class="bg-pen" src="./assets/product-bg-7.png" alt="">
        <img class="bg-pen" src="./assets/model.png" alt="" style="left:12.5%; bottom: 0px;">
        小智伴学管理驾驶舱
      </div>
      <div class="date-title">
        <img class="bg-pen" style="left: 27%;top: -1px;" src="./assets/date-bg-1.png" alt="">
        <img class="bg-pen" style="left: 25%;top: -1px;" src="./assets/date-bg-2.png" alt="">
        <img class="bg-pen" style="left: 23%;top: -1px;" src="./assets/date-bg-2.png" alt="">
        <img class="bg-pen" style="left: 21%;top: -1px;" src="./assets/date-bg-2.png" alt="">
        <img class="bg-pen" style="left: 19%;top: -1px;" src="./assets/date-bg-2.png" alt="">
        <img class="bg-pen" style="left: 17%;top: -1px;" src="./assets/date-bg-2.png" alt="">
        <span v-if="date">
          <span class="date-number">{{ date.year }}</span>年<span class="date-number">{{ date.month }}</span>月<span
            class="date-number">{{ date.day31 }}</span>日<span class="date-number">{{ date.hours }}</span>时<span
            class="date-number">{{ date.minute }}</span>分<span class="date-number">{{ date.seconds }}</span>秒<span
            class="date-number">星期{{ date.week }}</span>
        </span>
        <img class="bg-pen" style="right: 0;bottom: 0px;" src="./assets/date-bg-8.png" alt="">
        <img class="bg-pen" style="left: 21%;bottom: 0px;" src="./assets/date-bg-5.png" alt="">
        <img class="bg-pen" style="left: 60%;bottom: 0px;" src="./assets/date-bg-4.png" alt="">
        <img class="bg-pen" style="left: 62%;bottom: 0px;" src="./assets/date-bg-4.png" alt="">
        <img class="bg-pen" style="left: 64%;bottom: 0px;" src="./assets/date-bg-4.png" alt="">
        <img class="bg-pen" style="left: 66%;bottom: 0px;" src="./assets/date-bg-4.png" alt="">
        <img class="bg-pen" style="left: 68%;bottom: 0px;" src="./assets/date-bg-3.png" alt="">
      </div>
    </div>

    <div class="chart-box">
      <img :style="{
        left: '0px',
        top: '0px'
      }" src="./assets/chart-bg-8.png" alt="" class="bg-pen">
      <img :style="{
        right: '0px',
        top: '0px'
      }" src="./assets/chart-bg-1.png" alt="" class="bg-pen">
      <img :style="{
        right: '-10px',
        bottom: '205px'
      }" src="./assets/chart-bg-2.png" alt="" class="bg-pen">
      <img :style="{
        left: '-10px',
        bottom: '205px'
      }" src="./assets/chart-bg-3.png" alt="" class="bg-pen">
      <img :style="{
        bottom: '7px',
        left: '212px',
      }" src="./assets/chart-bg-5.png" alt="" class="bg-pen">
      <img :style="{
        bottom: '7px',
        right: '212px',
      }" src="./assets/chart-bg-5.png" alt="" class="bg-pen">
      <img :style="{
        bottom: '0px',
        left: '-20px'
      }" src="./assets/chart-bg-6.png" alt="" class="bg-pen">
      <img :style="{
        top: '17%',
        left: '0px'
      }" src="./assets/chart-bg-4.png" alt="" class="bg-pen">
      <img :style="{
        top: '17%',
        right: '0px'
      }" src="./assets/chart-bg-4.png" alt="" class="bg-pen">
      <img :style="{
        bottom: '0px',
        right: '-20px'
      }" src="./assets/chart-bg-7.png" alt="" class="bg-pen">
      <img :style="{
        top: '2px',
        left: '365px'
      }" src="./assets/circle.png" alt="" class="bg-pen">
      <img :style="{
        top: '2px',
        right: '365px'
      }" src="./assets/circle.png" alt="" class="bg-pen">
      <img :style="{
        bottom: '2px',
        right: '600px'
      }" src="./assets/circle.png" alt="" class="bg-pen">
      <img :style="{
        bottom: '2px',
        left: '600px'
      }" src="./assets/circle.png" alt="" class="bg-pen">
      <CategoryChart v-for="(item, index) in categoryList" :key="index" :data="item"></CategoryChart>
    </div>
  </div>
</template>

<script>
import CategoryChart from './components/CategoryChart'
export default {
  name: 'App',
  data() {
    return {
      date: this.updateTime(),
      categoryList: [{
        title: "心理与德育",
        options: {
          radar: {
            indicator: [
              { name: 'Sales', max: 6500 },
              { name: 'Administration', max: 16000 },
              { name: 'Information Technology', max: 30000 },
              { name: 'Customer Support', max: 38000 },
              { name: 'Development', max: 52000 },
              { name: 'Marketing', max: 25000 }
            ]
          },
          series: [
            {
              name: 'Budget vs spending',
              type: 'radar',
              data: [
                {
                  value: [4200, 3000, 20000, 35000, 50000, 18000],
                  name: 'Allocated Budget'
                },
                {
                  value: [5000, 14000, 28000, 26000, 42000, 21000],
                  name: 'Actual Spending'
                }
              ]
            }
          ]
        }
      }, {
        title: "装备与使用",
        options: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        }
      }, {
        title: "健康与体育",
        options: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              smooth: true
            }
          ]
        }
      }, {
        title: "习惯培养",
        options: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [
                120,
                {
                  value: 200,
                  itemStyle: {
                    color: '#a90000'
                  }
                },
                150,
                80,
                70,
                110,
                130
              ],
              type: 'bar'
            }
          ]
        }
      }, {
        title: "作业提交",
        options: {
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: 'Email',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: 'Union Ads',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: 'Video Ads',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: 'Direct',
              type: 'line',
              stack: 'Total',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: 'Search Engine',
              type: 'line',
              stack: 'Total',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        }
      }, {
        title: "兴趣与学习",
        options: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        }
      }]
    }
  },
  mounted() {
    setInterval(() => {
      this.date = this.updateTime()
    }, 1000)
  },
  components: {
    CategoryChart
  },
  methods: {
    updateTime() {
      let date = new Date()
      var year = date.getFullYear();
      // 获取月份（0-11）
      var month = date.getMonth() + 1;
      // 获取日期（1-31）
      var day31 = date.getDate();
      // 获取星期几（0-6）
      var week = date.getDay();
      switch (week) {
        case 0:
          week = "日"
          break;
        case 1:
          week = "一"
          break;
        case 2:
          week = "二"
          break;
        case 3:
          week = "三"
          break;
        case 4:
          week = "四"
          break;
        case 5:
          week = "五"
          break;
        case 6:
          week = "六"
          break;
        default:
          break;
      }
      // 获取小时数（0-23）
      var hours = date.getHours();
      // 获取分钟数（0-59）
      var minute = date.getMinutes();
      // 获取秒数（0-59）
      var seconds = date.getSeconds();
      return {
        year, seconds, minute, hours, week, day31, month
      }
    }
  }

}
</script>

<style>
body {
  padding: 0px;
  margin: 0px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: rgba(3, 12, 39, 100);
  min-height: 100vh;
  padding: 30px;
  min-width: 1920px;
  margin: auto;
}

.title-box {
  display: flex;
  justify-content: space-between;
  color: #E4E4E4;
  align-items: baseline;
  margin-bottom: 24px;
}

.product-tile {
  font-size: 48px;
  width: 683px;
  white-space: nowrap;
  text-align: center;
  height: 94px;
  background: url('./assets/product-bg.png') no-repeat;
  background-size: contain;
  position: relative;
  padding-top: 8px;
  box-sizing: border-box;
}

.school-tile {
  font-size: 24px;
  height: 76px;
  line-height: 76px;
  text-align: center;
  width: 525px;
  background: url('./assets/school-bg.png') no-repeat;
  background-size: contain;
  position: relative;
}

.bg-pen {
  position: absolute;
}

.date-title {
  font-size: 20px;
  height: 76px;
  width: 525px;
  line-height: 76px;
  position: relative;
  background: url('./assets/date-bg.png') no-repeat;
  background-size: contain;
  text-align: center;
}

.chart-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  padding: 24px;
}

.date-number {
  color: #F3DF17;
  font-size: 28px;
}
</style>
